<template>
  <el-dialog
    title="选择商品型号"
    :visible.sync="dialogVisible"
    width="350px"
  top="5%">
    <div v-loading="isLoading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-form ref="form" label-width="72px" size="mini">
      <el-form-item label="型号" v-if="product.stockList.length>0">
        <div class="choose-product-model-list">
          <div class="item" v-for="(stock,index) in product.stockList" :key="index" :class="{curr:currStockId===stock.id}" @click="checkAndSetStock(stock.id)" v-if="stock.score===0">
            <div style="height: 100px; background: #FFFFFF">
              <img style="max-height: 100px; width: 95%; margin-top: 2px;" :src="stock.image?stock.image:product.image"></img>
            </div>
            <span v-text="stock.model" style="max-width: 95%; display: inline-block; height: 25px; line-height: 25px;" class="ovd_s"></span>
          </div>
          <div class="c"></div>
        </div>
<!--        <el-radio-group-->
<!--          style="max-height: 200px; overflow-x: hidden; overflow-y: auto;"-->
<!--          v-model="currStockId"-->
<!--          @change="checkAndSetStock"-->
<!--        >-->
<!--          <el-radio-->
<!--            name="stockId"-->
<!--            v-for="(tmpModel,index) in product.stockList"-->
<!--            :key="index"-->
<!--            :label="tmpModel.id">-->
<!--            {{ tmpModel.model }}-->
<!--            <span style="color: #c03131; font-weight: bold" v-text="tmpModel.nums"></span>-->
<!--          </el-radio>-->
<!--        </el-radio-group>-->
      </el-form-item>
      <el-form-item label="库存:">
        <span v-text="currStock.nums" class="b"></span>
      </el-form-item>
      <el-form-item label="价格:">
        <span v-text="'￥'+ToMoney(currStock.price)" class="red"></span>
      </el-form-item>
      <el-form-item label="所需积分:" v-if="currStock.score>0">
        <span v-text="currStock.score" class="red"></span>
      </el-form-item>
      <el-form-item label="团购:" v-if="currStock.groupPrice>0">
        <span v-text="'￥'+ToMoney(currStock.groupPrice)" class="red"></span>
      </el-form-item>
    </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" :disabled="(currStock.nums)===0">确认选择</el-button>
    </div>
  </el-dialog>

</template>

<script>
import CartTools from '../tools/CartTools'

export default {
  name: 'ProductChooseModelDialog',
  data: function () {
    return {
      callback: null,
      dialogVisible: false,
      isLoading:false,
      currStockId:0,
      imageArr:[],
      currStock: {
        model: '',
        image: '',
        price: 0,
        groupPrice: 0,
        saleNums: 0,
        nums: 0,
        id: 0,
      },
      modelArr: [
        '大',
        '黑'
      ],
      product: {
        id: 0,
        name: '',
        image: this.NoImageUrl,
        shopId: 0,
        shopName: '',
        shopLogo: '',
        price: 0,
        modeArr: [],
        stockList:[]
      }
    }
  },
  watch:{
    $route:function () {
      if (this.dialogVisible){
        this.currStock={
          model: '',
          image: '',
          price: 0,
          groupPrice: 0,
          saleNums: 0,
          nums: 0,
          id: 0,
        }
        this.currStockId=0
        this.dialogVisible=false
        this.$forceUpdate()
      }
    },
    dialogVisible:function () {
      if (!this.dialogVisible){
        this.currStock={
          model: '',
          image: '',
          price: 0,
          groupPrice: 0,
          saleNums: 0,
          nums: 0,
          id: 0,
        }
        this.currStockId=0
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('BackKeyCallBus',function (){
      $this.dialogVisible=false
      $this.$forceUpdate()
    })
    $this.bus.$on('ProductChooseModelDialogCallBus', function (actType, productData, callback) {
      $this.product.id = productData.id
      $this.product.image = productData.image
      $this.product.name = productData.name
      $this.product.shopId = productData.shopId
      $this.product.shopName = productData.shopName
      $this.product.shopLogo = productData.shopLogo
      $this.getModelDetail(function () {

        // 商品列表单次选择加入购物车
        $this.actType = actType
        // 商品详情,重复弹出
        $this.callback = callback

        if (productData.shopProductStock && productData.shopProductStock.id){
          $this.currStockId=productData.shopProductStock.id
        }
        if (!$this.currStockId){
          $this.setDefaultStockId()
        }

        $this.checkAndSetStock()
        $this.dialogVisible = true
        $this.$forceUpdate()
      })
    })
    // $this.checkAndSetStock()
  },
  methods: {
    setDefaultStockId:function () {
      let $this=this
      $this.product.stockList.forEach(function (value, index) {
        if (value.isDefault.id===1){
          $this.currStockId=value.id
        }
      })
    },
    getModelDetail: function (callback) {
      let $this = this
      $this.isLoading=true
      $this.MyRequest($this.ApiDoNameMember + 'ShopProduct/productModeDetail', {
        id: $this.product.id,
      }, function (data) {
        $this.isLoading=false
        $this.product.id = data.id
        $this.product.name = data.name
        $this.product.image = data.image
        $this.product.stockList = data.stockList
        var imageArr=[]
        data.stockList.forEach(function (value, index) {
          imageArr.push(value.image?value.image:data.image)
        })
        $this.imageArr=imageArr
        $this.product.modelArr = data.modelArr
        callback()
        $this.$forceUpdate()
      }, function (msg) {
        $this.isLoading=false
        $this.$message.error(msg)
      })
    },
    // 确认选择操作
    confirm: function () {
      if (this.actType === 'productListItem') {
        CartTools.addProduct({
          id: this.product.id,
          name: this.product.name,
          image: this.product.image,
          shopId: this.product.shopId,
          shopName: this.product.shopName,
          shopLogo: this.product.shopLogo,
          nums: 1,
          price: this.currStock.price,
          shopProductStockId: this.currStock.id,
          model: this.currStock.model,
        })
        this.dialogVisible = false
        if (typeof api!=='undefined'){
          api.toast({
            msg:'添加成功'
          })
        }else{
          this.successTip('添加成功')
        }
        var currProduct=CartTools.getProduct(this.product.id,this.currStock.model)
        this.bus.$emit('CartAddCallBus','ShopProductStock',this.currStock.id,currProduct.nums,this.currStock.model)
        return
      }
      // console.log('this.currStock',this.currStock)
      if (typeof this.callback !== 'undefined') {
        this.callback(this.currStock)
      }
      this.dialogVisible = false
    },
    checkAndSetStock: function (stockId) {
      var currStock = {}
      let $this = this
      if (stockId){
        if (stockId===this.currStockId){
          return
        }
        this.currStockId=stockId
      }
      this.product.stockList.forEach(function (value, index) {
        // console.log('value', value)
        if (value.id === $this.currStockId) {
          currStock = value
        }
      })
      $this.currStock=currStock
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
